<template>
  <div>
    <van-field
      v-model="city"
      is-link
      readonly
      :label="label"
      placeholder="请选择城市"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择城市"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "",
  props:["label","options"],
  data() {
    return {
      show: false,
      city: "",
      cascaderValue: "",
    };
  },
  mounted() {
      // console.log(this.options)
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.city = selectedOptions.map(option => option.text).join("/");
    //   自定义事件回调传递选择的城市
    // console.log(selectedOptions)
      this.$emit("onValue",selectedOptions[1])
    }
  }
};
</script>

<style scoped lang="less">
</style>
